{% extends "base.html" %}
{%block header_js %}
<script type="text/javascript" src="/static/js/highcharts.js"></script>
<script type="text/javascript" src="/static/js/exporting.js"></script>
<script type="text/javascript" src="/static/js/date/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    {% for item in tpl_items %}
     $.get('/service/getchart/?mid={{mid}}&items={{item}}&title={{mname}}&div=contain_{{item}}',function(data){ eval(data); });
    {% endfor %}
});

$(document).ready(function() {
    {% for item in tpl_items_bytime %}
     $.get('/service/getchart/?mid={{mid}}&items={{item}}&title={{mname}}&frm={{start}}&to={{end}}&div=contain_{{item}}',function(data){ eval(data); });
    {% endfor %}
});
</script>
{% endblock %}
<body>
{% block header %}
{% include "monitor-menu.html" %}
{% endblock %}

{% block content %}
<div class="wrap">
	<div class="wrap_right tree">
	{% autoescape off %}
	    {{ mtree }}
	{% endautoescape %}
	</div>
	<div class="wrap_left right">
		<div class="shenqing1">
			<h5 style="float:left;width:96%;margin-bottom:10px;">监控详情</h5>
			<form action="/monitor/time/" method="post">
		        <input type="text" name="start" value="开始时间" id="d11" class="word_in" onClick="WdatePicker()"/>
		        <input type="text" name="end" value="结束时间" id="d11" class="word_in" onClick="WdatePicker()"/>
		   	    <input type="hidden" name="id" value="{{id}}">
		   	    <input type="submit" value="搜索" class="btn_search"/>
   	    	</form>
		</div>
		<div class="biaoge">
			<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2 center">
				<tr>
		            <th colspan="6" class="td_left" style="text-align:left;"><h2>主机：192.168.0.1 </h2></th>
				</tr>
				<tr class="g2">
	            	<td colspan="6"><h2>图表</h2></td>
				</tr>
				<tr class="g2">
		            <td colspan="6" class="td_left" style="text-align:center;border-bottom:1px solid #B6BFD8;">
		            {% for item in tpl_items %}
		            <div id=contain_{{item}}></div>
		            {% endfor %}
		            
		            {% for item in tpl_items_bytime %}
		            <div id=contain_{{item}}></div>
		            {% endfor %}
		            </td>
				</tr>
			</table></br>
			<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2">
		        <tr>
			        <th width="15%">最后报警时间</th>
			        <th width="20%">主机</th>
			        <th width="10%">监控项</th>
			        <th width="10%">当前状态</th>
			        <th width="15%">持续时间</th>
			        <th width="10%">报警次数</th>
			        <th width="10%">原因</th>
			        <th width="10%">处理人</th>
		        </tr>
				{% for a in alert %}
				<tr class="{% cycle 'g1' 'g2' %}">
					<td class="td_left">
					<span class="first style1">{{ a.timestamp|date:"Y-m-d H:i:s" }}</span>
					</td>
					<td><a href="/host/detail?id={{ a.mid.hid.id }}">{{ a.mid.hid.ip}}</a></td>
					<td>{{ a.mid.tpl}}</td>
					<td class="td_mid">
					<img src="/static/img/hr.gif" width="16" height="16" alt="" />
					</td>
					{% if a.downtime > 300 %} 
					<td><span style="width:10%;text-align:center;color:red">{{ a.downtime }}s</span></td>
					{% else %}
					<td><span style="width:10%;text-align:center">{{ a.downtime }}s</span></td>
					{% endif %}
					<td>5</td>
					{% if merge == 'on' %}
					{% if a.num < 5 %}
					<td><span style="width:10%">{{ a.num }}</span></td>
					{% else %}
					<td><span style="width:10%"><font color='red'>{{ a.num }}</font></span></td>
					{% endif %}
					{% endif %}
					<td><span style="width:7%">{{ a.mid.status }}</span></td>
					<td><span style="width:8%"> 
						{% if a.rtype %}
						<a href='/alert/reason?id={{ a.id }}'><font color='green'>{{a.rtype}}</font></a>
						{% else %}
						<a href='/alert/replay?id={{ a.id }}'>回复</a>
						{% endif %}
					</span></td>
				</tr>
				{% endfor %}
			</table>
		</div>
	</div>
</div>
{% endblock %}
</body>
</html>
